<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-gray-100">
    <div class="w-full max-w-md p-8 bg-white rounded-lg shadow-card">
      <div class="text-center mb-8">
        <div class="flex items-center justify-center mb-2">
          <div class="text-primary text-2xl font-bold">MineAdmin</div>
        </div>
        <div class="text-gray-500 text-sm">---- 开箱即用的商家平台管理系统</div>
      </div>
      
      <h2 class="text-2xl font-medium text-center mb-6">登录</h2>
      
      <a-form :model="formData" @submit="handleSubmit" class="space-y-4">
        <a-form-item field="username" :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model="formData.username" placeholder="商家账号" allow-clear>
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        
        <a-form-item field="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password v-model="formData.password" placeholder="密码" allow-clear>
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        
        <div class="flex items-center justify-between mb-4">
          <a-checkbox v-model="formData.rememberMe">记住我</a-checkbox>
          <a href="#" class="text-primary text-sm">忘记密码？</a>
        </div>
        
        <a-button type="primary" html-type="submit" long :loading="loading" class="h-10">
          登录 / 注册
        </a-button>
      </a-form>
      
      <div class="mt-8">
        <p class="text-center text-gray-500 text-sm mb-4 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:h-px before:w-[30%] before:bg-gray-200 after:content-[''] after:absolute after:right-0 after:top-1/2 after:h-px after:w-[30%] after:bg-gray-200">
          其他登录方式
        </p>
        <div class="flex justify-center space-x-6">
          <a-button shape="circle" class="text-xl">
            <template #icon><icon-wechat /></template>
          </a-button>
          <a-button shape="circle" class="text-xl">
            <template #icon><icon-qq /></template>
          </a-button>
          <a-button shape="circle" class="text-xl">
            <template #icon><icon-weibo /></template>
          </a-button>
          <a-button shape="circle" class="text-xl">
            <template #icon><icon-github /></template>
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { IconUser, IconLock, IconWechat, IconQq, IconWeibo, IconGithub } from '@arco-design/web-vue/es/icon';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref(false);

const formData = reactive({
  username: '',
  password: '',
  rememberMe: false
});

const handleSubmit = async () => {
  loading.value = true;
  try {
    // 模拟登录成功
    setTimeout(() => {
      router.push('/merchant');
      loading.value = false;
    }, 1500);
  } catch (error) {
    console.error('登录失败:', error);
    loading.value = false;
  }
};
</script>

<style scoped>
/* 可以添加额外的自定义样式 */
</style>
